<template>
  <div class="wrapper">
    <Header />
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="gray">
        <van-swipe-item v-for="(item, index) in bigImg" :key="index">
          <img :src="item" style="height: 100%; width: 100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="Options">
      <ul>
        <li v-for="(item, index) in optionImg" :key="index">
          <img :src="item.static" class="static" />
          <router-link
            :to="{ name: item.route['name'], params: { category: '全部' } }"
            >{{ item.title }}</router-link
          >
        </li>
      </ul>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "./Header";
import Footer from "./Footer";
export default {
  name: "HomePage",
  data() {
    return {
      bigImg: [
        "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1617008568.53329550.jpg",
        "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1614051032.34295528.jpg",
        "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1616776581.38587185.png",
        "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1617098700.31877799.jpg",
      ],
      optionImg: [
        {
          static: "https://static.easyicon.net/preview/130/1303103.gif",
          title: "新闻咨询",
          route: { name: "News" },
        },
        {
          static: "https://static.easyicon.net/preview/129/1291022.gif",
          title: "图文分享",
          route: { name: "PictrueList" ,params:{category:"全部"}},
        },
        {
          static: "https://static.easyicon.net/preview/130/1304028.gif",
          title: "商品展示",
          route: { name: "GoodsList" },
        },
        {
          static: "https://static.easyicon.net/preview/130/1303098.gif",
          title: "咨询",
          route: { name: "Consult" },
        },
        {
          static: "https://static.easyicon.net/preview/130/1304019.gif",
          title: "联系我们",
          route: { name: "Contact" },
        },
      ],
    };
  },
  components: {
    Header,
    Footer,
  },
  created() {
    this.axios
      .get("getNewsList.php")
      .then((response) => {
        //console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style scoped>
a:visited {
  color: black;
}
.wrapper {
  font-family: "FontAwesome";
  width: 100%;
  height: 50px;
  color: #ffffff;
  position: relative;
  margin-top: 50px;
}
.my-swipe .van-swipe-item {
  height: 350px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.Options {
  width: 335px;
  height: 190px;
  padding: 0 20px;
  padding-top: 10px;
}
.Options ul {
  width: 100%;
  height: 100%;
}
.Options ul li {
  float: left;
  margin-right: 20px;
  margin-left: 30px;
  margin-bottom: 30px;
  height: 60px;
  width: 60px;
  color: black;
  font-size: 12px;
}
.Options ul li img {
  height: 60px;
  width: 60px;
}
</style>
